<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/12/24 0024
  Time: 14:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>新发生生产计划登记</title>
    <link rel="stylesheet"  href="/bootstrap/bootstrap-5.3.3-dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/ProductDesign/module(1).css" />
    <style type="text/css">

    </style>
</head>
<body style="padding: 15px 50px;background-color: #eeeeee;">
<div class="panel-heading hhead">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <span style="color: blue;">您正在做的业务是：</span>
            <li class="breadcrumb-item"><a href="#">生产管理</a></li>
            <li class="breadcrumb-item"><a href="#">生产计划管理</a></li>
            <li class="breadcrumb-item active" aria-current="page">新发生生产计划登记</li>
        </ol>
    </nav>
</div>
<div style="margin-bottom: 2px">
    <div style="display: inline;margin-left: 72%;">
        <button class="btn btn-primary" id="addProduct">添加产品</button>
        <button class="btn btn-primary" id="deleteProduct">删除产品</button>
        <button class="btn btn-primary" id="Preview">预览</button>
<%--        <button class="btn btn-primary">返回</button>--%>
    </div>
</div> <!-- 此div改用栅格来做 -->
<div id="designListBox">
    <div style="text-align: center">
        <h3>生产计划单</h3>
    </div>
    <div style="padding: 30px">
        <table class="tbl1">
            <tr>
                <td class="col1">生产理由：</td>
                <td class="col2">新发生产</td>
                <td class="col1">供货时间：</td>
                <td class="col2">
                    <input type="text" class="txt_under_line" id="deliveryTime">
                </td>
            </tr>
            <tr>
                <td class="col1">登记人：</td>
                <td colspan="1"><input type="text" class="txt_under_line" id="registrants"></td>
                <td class="col1">登记时间：</td>
                <td colspan="2" id="checkInTime" ></td>
            </tr>
        </table>

        <table class="table table-bordered" style="margin: 15px auto;">
            <thead>
            <tr>
                <th>点选</th><th width="200px">产品名称</th><th width="200px">产品编号</th>
                <th width="300px">描述</th><th>数量</th><th>单位</th>
                <th>单价（元）</th><th>小计（元）</th>
            </tr>
            </thead>
            <tbody id="template">

            </tbody>

        </table>

        <table class="tbl3">

            <tr>
                <td class="col1">备注：</td>
                <td colspan="3" style="padding-top: 5px">
                    <textarea rows="4" cols="100" id="remarks"></textarea>
                </td>
            </tr>

        </table>
    </div>
</div>
<div class="modal fade" id="moduleDetailsModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
            <div class="modal-header" style="height: 8%">
                <h3 class="modal-title" id="staticBackdropLabel">添加产品</h3>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" style="height: 100%;width: 100%;margin: -1%">

                <iframe id="iframe2" src="" style="width: 100%;height: 99%"></iframe>
            </div>
            <div class="modal-footer" style="height: 8%">

                <span>注意：点击提交按钮后再确认方可提交</span>&emsp;&emsp;
                <button id="btnConcel" class="btn btn-success" data-bs-dismiss="modal">
                    确认<span class="glyphicon glyphicon-remove"></span>
                </button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="/js/jquery-3.7.0.min.js"></script>
<script type="text/javascript" src="/bootstrap/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript">
    $(function (){
        // 初始化时间
        setInterval(updateDateTime, 1000);

        $("#addProduct").click(function (){
            $("#iframe2").attr("src","/m-apply/Formulate_product_plan_query");
            $("#moduleDetailsModal").modal("show");
        })
        $("#moduleDetailsModal").on("hidden.bs.modal",function (){
            $("#iframe2").attr("src","");
            let IdItems = sessionStorage.getItem("IdItems");
            // sessionStorage.clear();
            IdItems = JSON.parse(IdItems);
            if (IdItems == null){
                return;
            }
            $("#template").empty();
            for (let i = 0; i < IdItems.length; i++) {
                let id = IdItems[i];
                if (id != null || id != "" || id!= undefined){
                    addToTable(id);
                }
            }
        })
        $("#template").on("input",".num-input", function () {
            let num = $(this).val();
            //判断是否为数字
            if (!/^[0-9]*$/.test(num)) {
                alert("请输入数字");
                $(this).val("");
                return;
            }
            let row = $(this).parent().parent();
            let costPrice = $(row).find("td:eq(6)").text();
            let total = costPrice * num;
            $(row).find("td:eq(7)").text(total);
        })
        //点击删除按钮删除点选的行
        $("#deleteProduct").click(function (){
            let checkboxes = $("#template input[type='checkbox']:checked");
            if (checkboxes.length == 0){
                alert("请选择要删除的行");
                return;
            }
            if (confirm("确定要删除吗？")){
                checkboxes.each(function (){
                    //删除sessionStorage中对应的id
                    let id = $(this).parent().parent().find("td:eq(0)").attr("id");
                    let Items = sessionStorage.getItem("IdItems");
                    if (Items == null){
                        return;
                    }
                    Items = JSON.parse(Items);
                    for (let i = 0; i < Items.length; i++) {
                        if (Items[i] == id){
                            Items.splice(i,1);
                            break;
                        }
                    }
                    sessionStorage.setItem("IdItems",JSON.stringify(Items));
                    $(this).parent().parent().remove();
                })
            }
        })
        //点击预览按钮跳转到预览页面，预览目前页面的内容及已添加的产品
        $("#Preview").click(function (){
            //判断是否有产品
            let rows2 = $("#template tr");
            if (rows2.length == 0){
                alert("请添加产品");
                return;
            }
            //获取登记人，登记时间，供货时间，备注存到sessionStorage中
            let registrants = $("#registrants").val();
            let checkInTime = $("#checkInTime").text();
            let remarks = $("#remarks").val();
            let deliveryTime = $("#deliveryTime").val();
            if (registrants == "" || registrants == null || registrants == undefined){
                alert("请填写登记人");
                return;
            }
            if (remarks == "" || remarks == null || remarks == undefined){
                alert("请填写备注");
                return;
            }
            sessionStorage.setItem("registrants",registrants);
            sessionStorage.setItem("checkInTime",checkInTime);
            sessionStorage.setItem("remarks",remarks);
            sessionStorage.setItem("deliveryTime",deliveryTime);

            let rows = $("#template tr");
            let data = [];
            for (let i = 0; i < rows.length; i++) {
                let row = rows[i];
                let id = $(row).find("td:eq(0)").attr("id");
                let productName = $(row).find("td:eq(1)").text();
                let productId = $(row).find("td:eq(2)").text();
                let productDescribe = $(row).find("td:eq(3)").text();
                let num = $(row).find("td:eq(4) input").val();
                if (num == "" || num == null || num == undefined){
                    alert("请填写-'"+productName+"'-的数量");
                    return;
                }
                let unit = $(row).find("td:eq(5)").text();
                let costPrice = $(row).find("td:eq(6)").text();
                let total = $(row).find("td:eq(7)").text();
                let obj = {
                    id: id,
                    productName: productName,
                    productId: productId,
                    productDescribe: productDescribe,
                    num: num,
                    unit: unit,
                    costPrice: costPrice,
                    total: total
                }
                data.push(obj);
            }
            sessionStorage.setItem("data",JSON.stringify(data));
            window.location.href = "/m-apply/New_production_plan_registration_preview";
        })
        //返回到当前页面时从sessionStorage中data获取数据恢复页面
        let data = sessionStorage.getItem("data");
        if (data != null){
            sessionStorage.removeItem("data")
            data = JSON.parse(data);
            for (let i = 0; i < data.length; i++) {
                let obj = data[i];
                let row = "<tr>" +
                    "<td class='ckbox' id='"+obj.id+"'><input type='checkbox' /></td>" +
                    "<td>" + obj.productName + "</td>" +
                    "<td>" + obj.productId + "</td>" +
                    "<td>" + obj.productDescribe+ "</td>" +
                    "<td class='num'><input class='num-input' value='"+obj.num+"'></td>" +
                    "<td>" + obj.unit + "</td>" +
                    "<td>" + obj.costPrice + "</td>" +
                    "<td>" + obj.total + "</td>" +
                    "</tr>";
                $("#template").append(row);
            }
        }
        // sessionStorage.clear();
    })
    function addToTable(id){
        if (id == null){
            return;
        }
        $.ajax({
            url: "/d-file/initialMaterial?id=" + id,
            type: "get",
            datatype: "json",
            success: function (data) {
                let row = "<tr>" +
                    "<td class='ckbox' id='"+data.id+"'><input type='checkbox' /></td>" +
                    "<td>" + data.productName + "</td>" +
                    "<td>" + data.productId + "</td>" +
                    "<td>" + data.productDescribe+ "</td>" +
                    "<td class='num'><input class='num-input'></td>" +
                    "<td>" + data.amountUnit + "</td>" +
                    "<td>" + data.costPrice + "</td>" +
                    "<td></td>" +
                    "</tr>";
                $("#template").append(row);
            }
        })
    }
    function updateDateTime(){
        let date = new Date();
        let year = date.getFullYear();
        let month = (date.getMonth() + 1).toString().padStart(2, '0');
        let day = date.getDate().toString().padStart(2,'0');
        let hours = date.getHours().toString().padStart(2,'0');
        let minutes = date.getMinutes().toString().padStart(2,'0');
        let seconds = date.getSeconds().toString().padStart(2,'0');
        let dateTimeStr = year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
        $("#checkInTime").text(dateTimeStr);
    }
</script>
</body>
</html>
